<template>
  <a-transfer
    v-model:target-keys="targetKeys"
    :data-source="mockData" 
    :list-style="{
      width: '266px',
      height: '432px',
      zIndex: 1000, 
    }"
     
    :showSelectAll="false"
    :locale="{
      searchPlaceholder: '请输入搜索内容' 
    }"
    :render="item => `${item.title}-${item.description}`"
    @change="handleChange" 
    :selectAllLabels="['不显示','显示']" 
   
  >
  <template #children="{ direction, selectedKeys, onItemSelect }">
    <!-- {{direction }}
    {{ selectedKeys }}
    {{ onItemSelect}} -->
    <Search v-if="direction === 'left'"/>
    <Table v-if="direction === 'right'"   :direction="direction" :selectedKeys="selectedKeys" :onItemSelect="onItemSelect"/>
    </template>

    <template #footer="{ direction }">
     <div v-if="direction === 'right'" class="settingImg0">
    <a-space>
       <img class="settingImg" :src="m36"  alt="" srcset="">
    <img class="settingImg" :src="m37"  alt="" srcset="">
      </a-space>
     </div>
      <!-- <a-button
        v-if="direction === 'right'"
        size="small"
        style="float: right; margin: 5px"
        @click="getMock"
      >
        right reload
      </a-button> -->
       
     

    </template>
    <template #notFoundContent>
      <span>没数据</span>
    </template>
  </a-transfer>
</template>
<script lang="ts" setup>
import { ref, onMounted } from 'vue';
import Table from "./Table.vue"
import Search from "./Search.vue"
import m36 from "../../assets/img/m36.png" 
import m37 from "../../assets/img/m37.png" 

interface MockData {
  key: string;
  title: string;
  description: string;
  chosen: boolean;
} 
const mockData = ref<MockData[]>([]);

const targetKeys = ref<string[]>([]);
onMounted(() => {
  getMock();
});
const getMock = () => {
  const keys = [];
  const mData = [];
  for (let i = 0; i < 20; i++) {
    const data = {
      key: i.toString(),
      title: `类型${i + 1}`,
      description: `类型${i + 1}`,
      chosen: Math.random() * 2 > 1,
    };
    if (data.chosen) {
      keys.push(data.key);
    }
    mData.push(data);
  }
  mockData.value = mData;
  targetKeys.value = keys;
};
const handleChange = (keys: string[], direction: string, moveKeys: string[]) => {
  console.log(keys, direction, moveKeys);
};
</script>
<style lang="scss" scope>
.ant-popover.ant-popconfirm{
          z-index: 9!important;
        }
        .settingImg0{
          padding: 10px;
        }
  .settingImg{
    width: 14px;
    height: 14px;
  }
</style>

